<template>
<<<<<<< HEAD
    <div style="margin-top: 15px;">
        <el-row>
            <el-col :span="3" style="text-align: left;">
                <el-button type="primary">新增</el-button>
            </el-col>
            <el-col :span="3" :offset="18" style="text-align: center;">
                <el-button type="danger">发布公告</el-button>
            </el-col>
        </el-row>
        <el-divider />

        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed type="selection" :selectable="selectable" width="55" />
            <el-table-column prop="seq" label="#" width="80" />
            <el-table-column prop="title" label="公告标题" width="120" />
            <el-table-column prop="content" label="公告内容" width="600" />
            <el-table-column prop="status" label="发布状态" width="90" />
            <el-table-column fixed="right" label="Operations" min-width="200">
            <template v-slot="scope">
                <el-button link type="primary" size="small" @click="handlerUpdate(scope.row.id)">
                更新
                </el-button>
                <el-button link type="primary" size="small" @click="handlerDelete(scope.row.id)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
  
    </div>
    
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getNoticeList } from '@/api/notice.js'

// 定义响应式数据
//const tableData = ref([{id:1,seq:2},{}])   ref({})  ref(null)


// 定义处理函数
const handlerUpdate = (id) => {
  console.log('update', id)
  //todo 
}

const handlerDelete = (id) => {
    console.log('delete', id)
    //todo
}

/*
onMounted(() => {
    
  getNoticeList().then(res => {
    console.log(res.data)
    tableData.value = res.data.data
  })

  //todo ...
  
})
*/


const tableData = [
  {
    id: 100,
    seq: 1,
    title: '明天上午开会',
    content: '请大家准时到会议室208开始，老总亲自参加',
    status: '未发布',
  },
  {
    id: 101,
    seq: 2,
    title: '明天上午开会',
    content: '请大家准时到会议室208开始，老总亲自参加',
    status: '未发布',
  },
  {
    id: 1908,
    seq: 3,
    title: '明天上午开会',
    content: '请大家准时到会议室208开始，老总亲自参加',
    status: '未发布',
  },
  {
    id: 9908,
    seq: 4,
    title: '明天上午开会',
    content: '请大家准时到会议室208开始，老总亲自参加',
    status: '未发布',
  },
]

    
</script >
<style scoped>
    .el-divider--horizontal {
        margin: 2px 0 24px 0;
    }
=======
	<div>
    <div class="container">
		<div class="handle-box">
            <el-button-group>
				<el-button color="#C2C2C2"   class="white"  @click="open">
                    <i class="iconfont icon-jia white"></i>新增
                </el-button>
				<el-button color="#23c6c8" class="white"  @click="pulish">
                    <i class="iconfont icon-bianji1  white"></i> 发布
                </el-button>
				<el-button color="#ED5565" class="white"  @click="handleAllDelete">
                    <i class="iconfont icon-cha  white"></i> 删除
                </el-button>
			</el-button-group>
                <el-row class="top-btn">
                    <el-input class="handle-input" v-model="searchMsg" placeholder="搜索"/>
                    <el-button  @click="handleSearch">
                        <i class="iconfont icon-icon-refresh "></i>
                    </el-button>  
                    <el-tree-select
                                v-model="value"
                                :data="data"
                                multiple
                                node-key="id"
                                :default-checked-keys="[2,3]"
                                :render-after-expand="false"
                                show-checkbox
                                :suffix-icon="CaretBottom"
                            > 
                         <template #prefix>
                            <i class="iconfont icon-th3"></i>
                         </template>
                    </el-tree-select>                        
			</el-row>
			</div>
			<el-table ref="multipleTableRef" 
				:header-cell-style="{color:'#2A62BC'}"
			 	:data="tableData"   
			 	style="width: 100%;" 
			 	height="380"
                size="small"
                border
				@selection-change="handleSelectionChange">
                <el-table-column   type="selection" width="35" />
				<!-- <el-table-column  prop="ID" label="序号"  ></el-table-column> -->
				<el-table-column prop="Title" label="公告标题" width="220"></el-table-column>
                <el-table-column prop="Content" label="公告内容"></el-table-column>
                <el-table-column label="是否发布" width="80">
                    <template #default="scope">
                        <el-switch
                                v-model="scope.row.status"
                                :active-value="'发布'"
                                :inactive-value="'不发布'"
                                active-color="#64bd63"
                                inactive-color="#c0c0c0"
                                
                                @change="changeSwitch(scope.row.status)"/>
					</template>
                </el-table-column>
                <el-table-column prop="Time" label="起止时间" width="80"></el-table-column>
                <el-table-column prop="Publisher" label="发布人" width="80"></el-table-column>
				<el-table-column label="操作" width="220" align="center" >
					<template #default="scope">
							<el-row class="right-btn">
						    <el-button  :icon="Edit" style="color: #292727; font-weight: 600;" @click="open(scope.$index,scope.row)">
                            </el-button>
				            <el-button  :icon="Delete"  style="color: #ed5565; font-weight: 600;" @click="handleDelete(scope.$index)">
                            </el-button>
						</el-row>
					</template>
				</el-table-column>	
			</el-table>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination
				:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:page-sizes="[5, 10, 15, 20]"
					size="small"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal"
					@size-change="handleSizeChange"
					@current-change="handlePageChange"/>
			</div>
	</div>
    <!-- 修改/添加弹出框 -->
		<el-dialog :title="titleEdit" v-model="editVisible" width="25%" >
			<el-form label-width="75px">
				<el-form-item label="公告标题:" >
					<el-input v-model="form.Title"   ></el-input>
				</el-form-item>
				<el-form-item label="发布人:" >
					<el-input v-model="form.Publisher"   ></el-input>
				</el-form-item>
				<el-form-item label="起止时间:" >
					<el-date-picker v-model="form.Time"></el-date-picker>
				</el-form-item>
				<el-form-item label="公告内容:">
					<el-input v-model="form.Content"  type="textarea" ></el-input>
				</el-form-item>
                <el-form-item label="是否发布">
					<el-switch
                                v-model="form.status"
                                :active-value="'发布'"
                                :inactive-value="'不发布'"
                                active-color="#64bd63"
                                inactive-color="#c0c0c0"/>	
				</el-form-item>
                <el-form-item label="公告连接:" v-if="titleEdit=='编辑'" >
					<el-input v-model="form.url" ></el-input>
				</el-form-item>
              
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button color="#c2c2c2" style="color: #fff;font-weight: 600;" @click="editVisible = false">关闭</el-button>
					<el-button color="#0ab394" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>


		<!-- </div> -->
	</div>
</template>

<script setup  >
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus,CaretBottom } from '@element-plus/icons-vue';
import { getNotices} from '../../api/notice' ;

//搜索
const  searchMsg=ref()

const value = ref()

const data = [
  {
    id:1,
    value: '公告标题',
    label: '公告标题',
  },
  {
    id:2,
    value: '公告内容',
    label: '公告内容',
  },
  {
    id:3,
    value: '是否发布',
    label: '是否发布',
  },
  {
    id:4,
    value: '起止时间',
    label: '起止时间',
  },
  {
    id:5,
    value: '操作',
    label: '操作',
  },
  
  {
    id:6,
    value: '用户名',
    label: '用户名',
  }, 
]
//分页字体
const small = ref(true)
// const size = ref<'default' | 'large' | 'small'>('default')


//分页数据
const query = reactive({
	pageIndex: 1,
	pageSize: 5,
});
//

//表格数据
const tableData = ref();
//总页数
const pageTotal = ref(0);
const multipleTableRef = ref()
const state = reactive({
	multipleSelection:[]
})

// 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
const getData = () => {
    getNotices({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
        console.log(res,"---res---")
        // tableData.value = res.data.
		let start  = (query.pageIndex-1)*query.pageSize;//开始位置
        let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
        tableData.value = res.data.slice(start,end);
        // tableData.value = res.data;
        pageTotal.value = res.data.length
    })
	
};
getData();
//多选框权限
const handleSelectionChange = (val) => {
  state.multipleSelection = val
}
// 分页导航
const handleSizeChange = (val ) => {
  // console.log(`${val} items per page`)
  query.pageSize = val;
  getData()
}
const handlePageChange = (val) => {
	query.pageIndex = val;
	console.log(val,"==")
	console.log(query.pageSize)
	getData()
};


//是够启用调用后台接口
const  changeSwitch=(status)=>{
    //调用后台修改接口
    console.log(status,'>>>status');
}

// 删除单个操作
const handleDelete = (index) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
	.then(() => {
		ElMessage.success('删除成功');
		//to 传递id 到后台 
		tableData.value.splice(index, 1);
		// 删除成功后
		// getData()
	})
	.catch(() => {});
};
//删除多个数据  to......
const handleAllDelete =()=>{
	// console.log('删除多个')
	console.log(state.multipleSelection,'===拿到所有选择的数据====')
	if (state.multipleSelection.length==0) {
		ElMessage.error('请选择项')
		return
  	}
	// console.log(state.multipleSelection.map(item=>item.id))
	//axios删除的操作
	// deleteAllAdmin({ids:state.multipleSelection.map(item=>item.id)})

	
}


// 查询操作  to... 需要自己实现与后台交互
const handleSearch = () => {
	query.pageIndex = 1;
	getData();
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
    ID: '', 
    Title:'' ,
    Content:'' ,
    status:'',
    Publisher:'',
    Type: '', 
    Time:'',
    url:''
});

// 
let titleEdit = ref('编辑')
let isDisable = ref(true)
const open  = (index,row)=>{//index是时间源对象
	if(row){
		titleEdit.value = "编辑"
		handleEdit(index,row)
	}else{
		//把第一个输出改为可编辑
		isDisable.value=false
		//清空表单中的数据
		titleEdit.value = "新增新闻标题";
		form.ID=''
        form.Title='' 
        form.Content='' 
        form.status=''
        form.Publisher=''
        form.Type=''
        form.Time=''
		editVisible.value = true	
	}
	console.log('-------测试传值-------')
	// console.log(index,row,index.target.innerText)
	// console.log(index,row)
	// console.log('================')

}
let idx = -1;
const handleEdit = (index,row) => {
	    idx = index;
        form.ID=row.ID
        form.Title=row.Title
        form.Content= row.Content
        form.status=row.status
        form.Publisher=row.Publisher
        form.Type=row.Type
        form.Time=row.Time
	editVisible.value = true;
};
//保存添加或者修改的数据 ---需要重新实现
const saveEdit = () => {
	editVisible.value = false;
	ElMessage.success(`修改第 ${idx + 1} 行成功`);
	tableData.value[idx].Time = form.Time;
	tableData.value[idx].Title = form.Title;
    tableData.value[idx].Publisher = form.Publisher;
    tableData.value[idx].Content = form.Content;
};

//发布
const  pulish=()=>{
    ElMessageBox.alert('发布成功', '127.0.0.1:550显示', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: '确定',
    
  })

}

</script >
<style lang="less" scoped>
.handle-box {
	margin-bottom: 20px;   
	.handle-btn{
		margin-left: 10px;
	}
}

.el-select {
	width: 200px;
	// margin-right: 10px;  
}

.handle-input {
	width: 200px;
    margin-right: 10px;
}
.label{
   display: inline-block;
   max-width:100%;
   margin: 5px;
   font-weight: 700; 
}
.top-btn{
	float: right;
	.el-button{
		margin-left: 5px;
	}
}
.white{
    color: #ffffff;
}
.right-btn{
 	justify-content:center;
	.el-button{
		height: 22px;
		// width: 60px;
		margin-right: 10px;
		padding: 1px 5px;
	}
}

.el-select{
        width: 50px;
        margin-left: 2px;
        margin-right: 20px;
        .el-input__inner{
            background-color: aquamarine;
        }
        
    }
    
>>>>>>> c088509ecc2282a34d0b932f6925d649261c336d
</style>